<template>
  <div>
    <!-- 订单编号 -->
    <template v-if="idFile.includes(tableInfo.type)">
      <el-tooltip v-if="cellValue" class="item" effect="dark" placement="top-start">
        <div slot="content" style="max-width: 200px;">{{ cellValue }}</div>
        <div class="ellipsisOne" style="color: #406EFF;cursor:pointer;" @click="toDetail(tableData,tableInfo)">{{ cellValue }}</div>
      </el-tooltip>
      <span v-else>--</span>
    </template>
    <!-- 下单平台 -->
    <template v-else-if="tableInfo.key === 'orderPlatform'">
      <div class="flex-center ellipsisOne">
        <platformIcon :data="cellValue" />
        {{ cellValue || '--' }}
      </div>
    </template>
    <!-- 达人分成 -->
    <template v-else-if="tableInfo.key === 'talentOptions'">
      <el-tooltip v-if="tableData.talentOptions && tableData.isAutoTalent === 1" class="item" placement="top" effect="dark">
        <div slot="content" style="max-width: 300px;">
          <div style="margin-bottom:5px;">供应商：{{ tableData.talentOptions.channelName || '--' }}</div>
          <div v-if="tableData.talentOptions.ruleName" style="margin-bottom:5px;">{{ tableData.talentOptions.ruleName || '' }}</div>
          <div style="margin-bottom:5px;">公式：{{ tableData.talentOptions.formula || '--' }}</div>
          <div>条件：{{ tableData.talentOptions.condition || '--' }}</div>
        </div>
        <div>自动填写</div>
      </el-tooltip>
      <div v-else-if="tableData.isAutoTalent === 0">手动填写</div>
      <div v-else>--</div>
    </template>
    <!-- 毛利率 -->
    <template v-else-if="tableInfo.key === 'profit'">
      <el-tooltip v-if="hasCellValue" class="item" effect="dark" placement="top-start">
        <div slot="content" style="max-width: 200px;">{{ cellValue | profitFilter }}</div>
        <div class="ellipsisOne">{{ cellValue | profitFilter }}</div>
      </el-tooltip>
      <span v-else>--</span>
    </template>
    <!-- 订单状态 -->
    <template v-else-if="tableInfo.key === 'status'">
      <div v-if="hasCellValue" class="dot-wrap">
        <span :style="{backgroundColor: getOrderColor(cellValue)}" class="dot"/>
        {{ cellValue | setOrderState }}
      </div>
      <span v-else>--</span>
    </template>
    <!-- 核销状态 -->
    <template v-else-if="tableInfo.key === 'writeOffStatus'">
      <div v-if="hasCellValue" class="dot-wrap">
        <span :style="{backgroundColor: getWriteOffColor(cellValue)}" class="dot"/>
        {{ cellValue | setAccountState }}
      </div>
      <span v-else>--</span>
    </template>
    <!-- 合作有效期 -->
    <template v-else-if="tableInfo.key === 'authorizeTime'">
      <div v-if="tableData.authorizeStartTime && tableData.authorizeEndTime">
        <span>{{ tableData.authorizeStartTime | format('YYYY/MM/DD') }}</span>
        <span>至</span>
        <span>{{ tableData.authorizeEndTime | format('YYYY/MM/DD') }}</span>
      </div>
      <span v-else>--</span>
    </template>
    <template v-else-if="tableInfo.type === 'time'">
      {{ cellValue | format(tableInfo.format || 'YYYY/MM/DD') }}
    </template>
    <template v-else-if="tableInfo.key === 'submitTime'">
      {{ cellValue | format('YYYY/MM/DD HH:mm:ss') }}
    </template>
    <template v-else-if="tableInfo.type === 'filter'">
      <el-tooltip v-if="tableInfo.filter(cellValue)" class="item" effect="dark" placement="top-start">
        <div slot="content" style="max-width: 200px;">{{ tableInfo.filter(cellValue) }}</div>
        <div class="ellipsisOne">{{ tableInfo.filter(cellValue) }}</div>
      </el-tooltip>
      <span v-else>--</span>
    </template>
    <template v-else-if="tableInfo.type === 'price'">
      <!-- <div v-if="(cellValue || cellValue===0)">{{ (cellValue/100)| moneyFilter }}</div>
      <div v-else>--</div> -->
      <PriceColumn :real-val="cellValue" :price="cellValue / 100" />
    </template>
    <!-- 审批状态 -->
    <template v-else-if="tableInfo.key === 'costApprovalStatus'">
      <div v-if="hasCellValue" class="dot-wrap">
        <span :style="{backgroundColor: getColor(cellValue)}" class="dot"/>
        {{ cellValue | costApprovalStatus }}
      </div>
      <div v-else>--</div>
    </template>
    <template v-else-if="tableInfo.type === 'operate'">
      <el-button
        :disabled="handleBtnDisabled(tableData.submitUser)"
        type="text"
        style="font-size: 14px;"
        @click="operation">{{ tableInfo.typeName }}</el-button>
    </template>
    <template v-else-if="tableInfo.type === 'viewCost'">
      <el-button
        type="text"
        style="font-size: 14px;"
        @click="tableInfo.handleClick(tableData)">{{ tableInfo.typeName }}</el-button>
    </template>
    <template v-else-if="tableInfo.type === 'contractCode'">
      <template v-if="tableData.linkContracts && tableData.linkContracts.length">
        <ToolTip v-if="tableData.linkContracts.length ===1" :content="tableData.linkContracts[0]['contractCode'] || tableData.linkContracts[0]['contractName']" is-can-click @handelClick="toContract(tableData.linkContracts[0])" />
        <el-tooltip v-else :open-delay="500" placement="top" effect="dark">
          <div slot="content" style="max-width: 200px">
            <div v-for="item in tableData.linkContracts" :key="item.id" class="mb5 global-link" @click="toContract(item)">{{ item.contractCode || item.contractName }}</div>
          </div>
          <span class="global-link">共{{ tableData.linkContracts.length }}个合同</span>
        </el-tooltip>
      </template>
      <div v-else>--</div>
    </template>
    <template v-else>
      <el-tooltip v-if="hasCellValue" class="item" effect="dark" placement="top-start">
        <div slot="content" style="max-width: 200px;">{{ cellValue }}</div>
        <div class="ellipsisOne">{{ cellValue }}</div>
      </el-tooltip>
      <span v-else>--</span>
    </template>
  </div>
</template>

<script>
import platformIcon from '@/components/Common/platformIcon';
// filters
import { moneyFilter } from '@/filters/number';
import { format } from '@/filters/date';
import {
  setOrderState,
  costApprovalStatus, setAccountState } from '@/filters/status';
// mixins
import costSet from '@/mixins/costSet';
import { mapState } from 'vuex';
import { encryption } from '@/utils';

export default {
  components: { platformIcon },
  filters: {
    moneyFilter,
    format,
    setOrderState,
    setAccountState,
    costApprovalStatus,
    profitFilter(num) {
      const percent = Number(num) * 100;
      return percent.toFixed(2) + '%';
    }
  },
  mixins: [
    costSet],
  props: {
    tableInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      idFile: ['orderId', 'ipId', 'emojiId', 'projectNum', 'porjectOrder']
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    cellValue() {
      return this.tableData[this.tableInfo.key];
    },
    hasCellValue() {
      return this.cellValue || this.cellValue === 0;
    }
  },
  methods: {
    operation() {
      this.$emit('onOperate');
    },
    handleBtnDisabled(user) {
      return this.userInfo.userName !== user;
    },
    toDetail(item, info) {
      let routeUrl = null;
      // 渠道订单
      if (info.type === 'orderId') {
        routeUrl = this.$router.resolve({
          name: 'orderDetail',
          params: { orderId: item.id }
        });
      } else if (info.type === 'ipId') {
        // ip授权订单
        routeUrl = this.$router.resolve({
          name: 'mengliOrderDetail',
          params: { id: item.id },
          query: { type: 0 }
        });
      } else if (info.type === 'emojiId') {
        // 营销授权订单
        routeUrl = this.$router.resolve({
          name: 'mengliOrderDetail',
          params: { id: item.id },
          query: { type: 1 }
        });
      } else if (info.type === 'projectNum') {
        routeUrl = this.$router.resolve({
          name: 'projectDetail',
          params: { id: item.id }
        });
      } else if (info.type === 'porjectOrder') {
        routeUrl = this.$router.resolve({
          name: 'projectChildDetail',
          params: { id: item.id }
        });
      }
      if (routeUrl) window.open(routeUrl.href, '_blank');
    },
    toContract(item) {
      const routeUrl = this.$router.resolve({
        name: 'contractDetail',
        params: { id: encryption(item.id) },
        query: {
          processId: encryption(item.processId)
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/placeholder.scss';
.dot-wrap {
  @extend %dot-wrap;
}
</style>
